* {
  /* 初始化 */
  margin: 0;
  padding: 0;
}
body {
  /* 100%窗口高度 */
  height: 100vh;
  /* 径向渐变背景 ellipse表示椭圆 */
  background: radial-gradient(
    ellipse at center,
    #fffeea 0%,
    #fffeea 35%,
    #b7e8eb 100%
  );
  /* 溢出隐藏 */
  overflow: hidden;
}
/* 海平面 */
.sea {
  width: 100%;
  height: 5%;
  background-color: #015871;
  /* 绝对定位 底部 */
  position: absolute;
  left: 0;
  bottom: 0;
}
.wave {
  /* 这里的背景用的是svg文件，这个文件我事先在PS里做好并导出 */
  background: url("../../images/svg/wave.svg") repeat-x;
  width: 6400px;
  height: 198px;
  /* 绝对定位 */
  position: absolute;
  top: -198px;
  /* 执行波动动画：动画名 时长 贝塞尔曲线 无限次播放 */
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}
.wave:nth-child(2) {
  top: -175px;
  /* 执行波动+上下浮动动画 */
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite,
    swell 7s ease infinite;
  animation-delay: -0.2s;
}

/* 定义动画 */
/* 波动动画 */
@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}
/* 上下浮动动画 */
@keyframes swell {
  0%,
  100% {
    transform: translate(0, -25px);
  }
  50% {
    transform: translate(0, 5px);
  }
}
